<template>
    <div id="category-info-view">
        <!-- 顶部信息栏 -->
        <van-nav-bar fixed :title="category.name" left-text="返回" left-arrow @click-left="closeCategoryInfoView" />

        <!-- 类别详情图 -->
        <van-image width="100%" fit="cover" style="width:100%;height:300px;zoom:1.5" :src="getImagePath(category.images)"></van-image>

        <!-- 类别详情内容 -->
        <div id="category-info-view-content"
            style="border-top-left-radius: 15px; border-top-right-radius: 15px; background-color: #fff; height: 100%; padding-bottom: 80px;">
            <div class="content" style="padding: 20px;">
                <h2 style="display: block; height: 43px; border-bottom: 1px solid #E4E4E4;">{{ category.name }}</h2>

                <!-- 简介 -->
                <div id="intro" style="margin-top: 20px; margin-bottom: 20px;">
                    <h3 style="color: #FA6408; margin-bottom: 12px;">简介</h3>
                    <span>{{ category.description }}</span>
                </div>

                <!-- 相关商品 -->
                <div id="products">
                    <h3 style="color: #FA6408; margin-bottom: 12px;">相关商品</h3>
                    <product-card-row :products="products"></product-card-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { NavBar as VanNavBar } from 'vant'
import { Image as VanImage } from 'vant'

import ProductCardRow from '@/components/ProductCardRow.vue';
import http from "@/plugins/http";

export default {
  name: "category-info-view",
  components: {
    VanNavBar,
    VanImage,
    ProductCardRow
  },
  data() {
    return {
      products: []
    }
  },
  props: {
    category: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      http.get('/product/all').then(res => {
        if (res.statusCode === '200') {
          console.log(res.data)
          this.products = res.data;
        }
      })
    },
    closeCategoryInfoView() {
      this.$emit('closeCategoryInfoView')
    },
    getImagePath(icon) {
      try {
        console.log(`@/${icon}`)
        return require(`@/${icon}`);
      } catch (e) {
        return '';
      }
    }
  }
}
</script>

<style scoped>
#category-info-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F6F7F9;
    z-index: 99;
    overflow: auto;
}
</style>